<script setup lang="ts">
import { reactive } from 'vue';
import { EFileSelector } from 'exploria-ui';

const fileInfo = reactive({
    filename: '',
    fileSize: 0,
    baseUrl: '',
});
const handleChange = (file: File) => {
    fileInfo.filename = file.name;
    fileInfo.fileSize = file.size;
    fileInfo.baseUrl = URL.createObjectURL(file);
    console.log(URL.createObjectURL(file));
};
</script>

<template>
    <EFileSelector
        @change="(file) => handleChange(file)"
        :access-file-types="['mp3']"
    >
        <template #changed>
            <div>
                <video
                    :src="fileInfo.baseUrl"
                    autoplay
                    muted
                    style="height: 100px; width: 200px; object-fit: scale-down"
                />
                <div>文件名：{{ fileInfo.filename }}</div>
                <div>文件大小：{{ fileInfo.fileSize }}</div>
            </div>
        </template>
    </EFileSelector>
</template>

<style scoped lang="scss">
.file-selector {
    width: 300px;
    height: 200px;
    font-size: 14px;
}
</style>
